<!DOCTYPE html>
<html lang="en">
<style>
    body {
        background-color: rgba(192, 192, 192, 0.3);
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./plugin/layui/css/layui.css"/>
    <script src="plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        /*李英勇：视频详情*/


        layui.use(['jquery', 'layer', 'table'], function () {
            let $ = layui.jquery, layer = layui.layer, table = layui.table;

            let vid = localStorage.getItem("vid");
            let refreshToken = localStorage.getItem("refreshToken");
            let token = localStorage.getItem("token");

            //初始化加载视频
            $.ajax({
                url: "getVideoByVid/" + vid,
                type: "get",
                headers: {"refreshToken": refreshToken, "token": token},
                success: function (res, status, xhr) {
                    console.log(res.data);
                    console.log(xhr);
                    console.log(xhr.getResponseHeader("token"))
                    if (res.code == 0) {
                        console.log($("#video"), res.data.path);
                        $("#video").prop("src", "/classteacher" + res.data.path);
                        if (xhr.getResponseHeader("token") != null) {
                            //更新本地token
                            localStorage.setItem("token", res.headers.token);
                        }
                    } else {
                        layer.msg(res.msg);
                    }
                }

            });

            //获取视频相关的评论
            table.render({
                elem: '#app'
                , url: 'getVideoRemarkByVid/' + vid //数据接口
                , height: 200
                , page: true //开启分页
                , skin: 'nob'
                , cols: [[ //表头
                    {field: 'vrid', title: 'ID', width: 100}
                    , {field: 'content', title: '内容', width: 100}
                    , {field: 'uaccount', title: '评论账号', width: 100},
                    {field: 'role', title: '身份', width: 100}
                ]],
                limit: 3,
                headers: {refreshToken: refreshToken, token: token},
                done: function (res, curr, count) {

                }
            });


            //增加评论
            $("#btnremark").on("click", function () {
                let content = $("#textarea").val();
                let data = {
                    "content": content,
                    "vid": vid,
                    "refreshToken": refreshToken
                };
                $.ajax({
                    url: "addRemark",
                    type: "post",
                    data: data,
                    headers: {"refreshToken": refreshToken, "token": token},
                    success: function (res, status, xhr) {
                        if (res.code == 0) {
                            layer.msg(res.msg);
                            table.reload('app', {
                                url: 'getVideoRemarkByVid/' + vid
                            });
                            if (xhr.getResponseHeader("token") != null) {
                                //更新本地token
                                localStorage.setItem("token", res.headers.token);
                            }
                        }
                    }

                });
            });

            //点赞
            $("#thumsup").on("click", function () {
                let data = {
                    "vid": vid
                };
                $.ajax({
                    url: "thumbsup",
                    type: "post",
                    data: data,
                    headers: {"refreshToken": refreshToken, "token": token},
                    success: function (res, status, xhr) {
                        if (res.code == 0) {
                            layer.msg(res.msg);
                            if (xhr.getResponseHeader("token") != null) {
                                //更新本地token
                                localStorage.setItem("token", res.headers.token);
                            }
                        }
                    }

                });
            });


        });
    </script>
    <style>
        #main {
            margin-left: 50px;
        }

        #content {
            margin-left: 20px;
            width: 400px;
            height: 250px;
        }

        #remark {
            margin-left: 20px;

        }

        #addRemark {
            width: 600px;
            border-color: #0C0C0C;
            border-bottom-style: solid;
            border-bottom-color: #00a65a;
        }

        #btnremark {
            margin-left: 450px;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="content" style="float: left">
        <video width="400" height="250" controls autoplay id="video">
            <source src="" type="video/mp4">
        </video>
    </div>
    <div id="remark" style="float: left">
        评论:
        <table class="layui-table " id="app" lay-filter="test">
        </table>
    </div>
    <div id="addRemark">
        <textarea id="textarea" name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
        <input type="button" id="btnremark" value="评论" class="layui-btn" style="float: left">
        <input type="button" id="thumsup" value="点赞" class="layui-btn layui-btn-warm" style="float: left">
    </div>
</div>


</body>

</html>